<template>
    <div>
        <!--上传组件开始-->
        <a-modal :visible="visible6"
                 :confirmLoading="confirmLoading6"
                 width="850px"
                 closeIcon=""
                 @ok="handleCancel6"
                 @cancel="handleCancel6">
            <template slot="footer">
                <a-upload :multiple="true"
                          :action="'fdfs/breakpointUpload'"
                          :customRequest="upload"
                          :showUploadList="false"
                          style="width: 85px; float: left;margin-left: 30px;">
                    <a-button><a-icon type="upload"/>上传</a-button>
                </a-upload>
                <a-button type="primary" @click="handleCancel6" style="width: 85px; margin-right: 30px;">关闭</a-button>
            </template>

            <a-table :columns="annexTableColumns"
                     :data-source="annexList"
                     :pagination="pagination"
                     bordered
                     @change="handleTableChange"
                     rowKey="sa_id"
                     size="small">

                <a-progress type="circle" :percent="100" :width="80" />
                <!--文件大小-->
                <template slot="fileSize" slot-scope="text, record">{{formatSize(text)}}</template>
                <!--上传状态-->
                <template slot="progress" slot-scope="text, record">
                    <a-progress type="circle" :percent="text" :width="30"/>
                </template>

                <template slot="name" slot-scope="text, annex">
                    <a-input v-if="annex.editable"
                            style="margin: -5px 0"
                             @keyup.enter="update(annex,text)"
                             v-model="text"/>
                    <template v-else>
                        <div style="width: 100%;height: 100%" @dblclick="edit(annex)">{{ text }}</div>
                    </template>
                </template>

                <template slot="operation" slot-scope="text, annex">
                    <a type="link" target="_blank" :href="sessionStorage()+annex.annexFile.saf_file_path"
                       style="margin-right: 5px;">预览</a>
                    <a style="margin-right: 5px;" v-download="{url:sessionStorage()+annex.annexFile.saf_file_path,fileName:annex.sa_show_name}">下载</a>
                    <a-popconfirm     style="margin-right: 5px;"
                                  title="确定删除?"
                                  ok-text="确定"
                                  cancel-text="取消"
                                  @confirm="deleteEnclosure(annex.sa_id)">
                        <a href="#">删除</a>
                    </a-popconfirm>
                    <a style="margin-right: 5px;" v-show="doType=='editor'" @click="insertValue(annex,1)">插入预览</a>
                    <a v-show="doType=='editor'" @click="insertValue(annex,2)">插入附件</a>
                </template>
            </a-table>

        </a-modal>
        <!--上传组件结束-->
    </div>
</template>

<script>
    import {getAction, deleteAction, uploadFile, formatSize, postAction} from '@/api/dl'
    export default {
        name: "Annex",
        props: {
            annex_uuid:{
                type: Number,
                default: ''
            },
            doType:{
                type: String,
                default: ''
            },
        },
        watch: {
            'doType': {//dotype切换时处理
                handler: function(){
                    if(this.doType=='editor'){
                        this.operationWidth=300;
                    }else{
                        this.operationWidth=130;
                    }
                    // console.log(this.operationWidth);
                }
            }
        },
        data(){
            return {
                operationWidth:250,
                visible6: false,//附件列表,
                confirmLoading6: false,
                //附件对象
                annexList:[],
                pagination: {
                    current: 1,//默认第一页
                    pageSize: 10,//每页中显示5条数据
                    total: 0,//有几条
                    showSizeChanger: true,
                    pageSizeOptions: ["5", "10", "20"],//每页中显示的数据
                    showTotal: total => `共有 ${this.pagination.total} 条数据`,  //分页中显示总的数据
                },

                annexTableColumns:[
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        scopedSlots: {customRender: 'operation'},
                        width:250
                    },
                    {
                        title: '名称',
                        dataIndex: 'sa_show_name',
                        scopedSlots: {customRender: 'name'},
                    },
                    {
                        title: '上传状态',
                        className: 'column-money',
                        dataIndex: 'annexFileProceed.safp_progress',
                        scopedSlots: { customRender: 'progress' },
                        width:80
                    },
                    {
                        title: '上传时间',
                        className: 'column-money',
                        dataIndex: 'sa_add_time',
                        width:150
                    },
                    {
                        title: '文件大小',
                        dataIndex: 'annexFile.saf_file_size',
                        scopedSlots: { customRender: 'fileSize' },
                        width:80
                    },
                ]
            }
        },
        methods:{
            sessionStorage(){
                return this.webUrl;
            },
            //附件操作开始
            formatSize(s){
                return formatSize(s);
            },
            edit(annex){
                const newData = [...this.annexList];
                newData.forEach(function (o) {
                    if(o.sa_id==annex.sa_id){
                        o.editable=true;
                    }
                })
                this.annexList = newData;
            },
            update(annex,text){
                console.log(annex,text);
                if(text==""){
                    this.$message.error('内容不能为空！');
                    const newData = [...this.annexList];
                    newData.forEach(function (o) {
                        if(o.sa_id==annex.sa_id){
                            o.editable=false;
                            o.sa_show_name=annex.sa_show_name;
                        }
                    })
                    this.annexList = newData;
                    return;
                }

                postAction('/fastdfs/annex/updateAnnexShowName',{
                    sa_id:annex.sa_id,
                    sa_show_name:text
                }).then(res=>{
                    if(res.is){
                        const newData = [...this.annexList];
                        newData.forEach(function (o) {
                            if(o.sa_id==annex.sa_id){
                                o.editable=false;
                                o.sa_show_name=res.data.sa_show_name;
                            }
                        })
                        this.annexList = newData;
                    }
                })
            },

            /**
             *分页查询
             */
            queryPageList(){
                getAction(`fastdfs/annex/queryEnclosure/${this.annex_uuid}/${this.pagination.current}/${this.pagination.pageSize}`).then(res => {
                    if (res.is) {
                        this.annexList = res.data.list;
                        this.pagination.total = res.data.totalRow;
                    } else {
                        console.log("请求结果失败！", res)
                    }
                }).catch(err => {
                    console.log("代码异常", err)
                })
            },
            load(){//显示和加载附件
                this.visible6 = true;
                this.queryPageList();
            },
            /**
             * 刷新数据
             */
            annexRefresh() {
                this.queryPageList();
            },
            upload(options){
                let that=this;
                uploadFile(options.file,{
                    tableId:that.annex_uuid,
                    workCode:1,
                    objName:0
                },function (p,md5,o) {
                    that.annexRefresh();
                    // console.log(p,md5,o);
                });
            },

            insertValue(annex,type){
                this.$emit('insertValue',annex,type);
            },

            //附件操作结束
            //删除附件
            deleteEnclosure(id) {
                deleteAction(`fastdfs/annex/delete/${id}`).then(res => {
                    if (res.success == true) {
                        this.annexRefresh();
                    }
                })
            },
            //上传附件
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} 上传成功`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} 上传失败`);
                }
            },
            //分页选择查询 -- 几条数据和第几页查询
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.queryPageList();
            },
            //附件取消
            handleCancel6(e) {
                this.visible6 = false;
            },
        }
    }
</script>

<style scoped>

</style>